import { Graph, Edge, Path } from "@antv/x6";
import CustomNode from "./CustomNode";
import { register } from "@antv/x6-react-shape";

/**
 * @file GraphConfig.ts
 * @description 图表配置相关功能，包括节点、边、连接器的注册与配置
 */

/**
 * 注册自定义节点
 * 定义数据处理流程图中使用的自定义节点样式和属性
 */
export const registerCustomNodes = () => {
  register({
    shape: "custom-node",
    width: 180,
    height: 48,
    component: CustomNode,
    // 连接桩默认不可见
    ports: {
      groups: {
        in: {
          position: "left",
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: "transparent",
              strokeWidth: 1,
              fill: "transparent",
            },
          },
        },
        out: {
          position: "right",
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: "transparent",
              strokeWidth: 1,
              fill: "transparent",
            },
          },
        },
      },
    },
  });
};

/**
 * 注册自定义连接器
 * 定义连接节点的曲线样式
 */
export const registerConnectors = () => {
  Graph.registerConnector(
    "curveConnector",
    (sourcePoint, targetPoint) => {
      const hgap = Math.abs(targetPoint.x - sourcePoint.x);
      const path = new Path();

      // 从源点开始绘制
      path.appendSegment(
        Path.createSegment("M", sourcePoint.x - 4, sourcePoint.y)
      );
      path.appendSegment(
        Path.createSegment("L", sourcePoint.x + 12, sourcePoint.y)
      );

      // 水平三阶贝塞尔曲线
      path.appendSegment(
        Path.createSegment(
          "C",
          sourcePoint.x < targetPoint.x
            ? sourcePoint.x + hgap / 2
            : sourcePoint.x - hgap / 2,
          sourcePoint.y,
          sourcePoint.x < targetPoint.x
            ? targetPoint.x - hgap / 2
            : targetPoint.x + hgap / 2,
          targetPoint.y,
          targetPoint.x - 6,
          targetPoint.y
        )
      );

      // 结束线段
      path.appendSegment(
        Path.createSegment("L", targetPoint.x + 2, targetPoint.y)
      );
      return path.serialize();
    },
    true
  );
};

/**
 * 配置边的样式和属性
 * 设置边的基本样式、连接方式和交互行为
 */
export const configureEdges = () => {
  Edge.config({
    markup: [
      {
        tagName: "path",
        selector: "wrap",
        attrs: {
          fill: "none",
          cursor: "pointer",
          stroke: "transparent",
          strokeLinecap: "round",
        },
      },
      {
        tagName: "path",
        selector: "line",
        attrs: {
          fill: "none",
          pointerEvents: "none",
        },
      },
    ],
    connector: { name: "curveConnector" },
    attrs: {
      wrap: {
        connection: true,
        strokeWidth: 10,
        strokeLinejoin: "round",
      },
      line: {
        connection: true,
        stroke: "#A2B1C3",
        strokeWidth: 2,
        targetMarker: {
          name: "classic",
          size: 6,
        },
      },
    },
  });
};

/**
 * 注册自定义边类型
 */
export const registerCustomEdges = () => {
  Graph.registerEdge("data-processing-curve", Edge, true);
};

/**
 * 初始化图表配置
 * 注册所有必要的自定义组件和配置
 */
export const initGraphConfig = () => {
  registerCustomNodes();
  registerConnectors();
  configureEdges();
  registerCustomEdges();
};
